<template>
  <div
    class="login-wrapper"
    :style="indexData.site_login_background!='' ? { 'background-image': 'url(' + indexData.site_login_background + ')' } : { 'background-image': 'url(/imgs/bg-login.jpg)' } "
  >
    <el-form
      ref="form"
      size="large"
      :model="form"
      :rules="rules"
      class="login-form ele-bg-white"
      @keyup.enter.native="doSubmit"
      style="width: 520px;height:420px;"
    >
      <h4>手机注册</h4>
      <el-form-item prop="telphone">
        <el-input v-model="form.telphone" placeholder="请输入手机号" clearable prefix-icon="el-icon-mobile-phone">
          <template v-slot:prepend>中国  +86</template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          clearable
          show-password
          v-model="form.password"
          placeholder="请输入登录密码"
          prefix-icon="el-icon-lock"
        />
      </el-form-item>
      
      <el-form-item prop="code">
        <div class="login-input-group">
          <el-input
            clearable
            v-model="form.code"
            placeholder="请输入验证码"
            prefix-icon="el-icon-_vercode"
          />
          <el-button
            size="large"
            :disabled="!!countdownTimer"
            style="margin-left: 10px"
            @click="showImgCodeCheck"
          >
            <span v-if="!countdownTimer">发送验证码</span>
            <span v-else>已发送 {{ countdownTime }} s</span>
          </el-button>
        </div>
      </el-form-item>
      <div class="el-form-item">
        <el-link
          type="primary"
          :underline="false"
          class="ele-pull-right"
          @click="$router.push('/login')"
        >
          返回登录
        </el-link>
      </div>
      <div class="el-form-item">
        <el-button
          size="large"
          type="primary"
          class="login-btn"
          :loading="loading"
          @click="doSubmit"
        >
          立即注册
        </el-button>
      </div>
    </el-form>
   
    <!-- 图形验证码弹窗 -->
    <ele-modal width="320px" title="发送验证码" :visible.sync="showImgCode">
      <div class="login-input-group" style="margin-bottom: 15px">
        <el-input
          size="large"
          v-model="imgCode"
          placeholder="输入图形验证码"
          @keyup.enter.native="sendCode"
        />
        <img
          alt=""
          :src="captcha"
          class="login-captcha"
          @click="changeImgCode"
        />
      </div>
      <el-button
        size="large"
        type="primary"
        class="login-btn"
        :loading="codeLoading"
        @click="sendCode"
      >
        立即发送
      </el-button>
    </ele-modal>
    <div class="d-fixed flex">
      <div>
        <div class="d-title">在线客服</div>
        <div class="flex-align-center d-height">
          <img :src="indexData.kf_img" class="d-img" id="img-fangda" />
          <div class="flex-column"> 
            <div class="d-div">在线时间：{{indexData.kf_date}}</div>
            <div class="d-div d-m-top" v-if="indexData.site_beian">
              <a href="https://beian.miit.gov.cn/" target="_blank"> {{indexData.site_beian}}</a>
            </div>
            <div class="d-div d-m-top" v-if="indexData.site_jingbeian">
              <a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank"> {{indexData.site_jingbeian}}</a>
            </div>
            <div class="d-div d-m-top" v-if="indexData.site_copyright">
              {{indexData.site_copyright}}
            </div>
          </div>
       </div>
      </div>
      <div class="flex-column" style="margin-left: 126px;"  v-if="indexData.kf_phone || indexData.kf_mailbox || indexData.kf_address">
        <div class="d-title">联系我们</div>
        <div class="d-height">
          <div class="flex-align-center d-margin-btn" v-if="indexData.kf_phone">
            <el-icon class="el-icon-phone-outline"></el-icon>
            <div class="d-div2">{{indexData.kf_phone}}</div>
          </div>
          <div class="flex-align-center d-margin-btn" v-if="indexData.kf_mailbox">
            <el-icon class="el-icon-_network"></el-icon>
            <div class="d-div2">{{indexData.kf_mailbox}}.com</div>
          </div>
          <div class="flex-align-center d-margin-btn" v-if="indexData.kf_address">
            <el-icon class="el-icon-location-outline"></el-icon>
            <div class="d-div2">{{indexData.kf_address}}</div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
  
</template>

<script>
  import { getToken } from '@/utils/token-util';
  import { sendCode,register } from '@/api/login';
  import { getIndexData,getProxyByHost} from '@/api/layout';
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Register',
    data() {
      return {
        // 登录框方向, 0居中, 1居右, 2居左
        direction: 0,
        // 加载状态
        loading: false,
        // 表单数据
        form: {
          telphone: '',
          password: '',
          code: ''
        },
        indexData:{
          logo_title:'',
          site_login_image:'',
          site_login_background:'',
        },
        // 表单验证规则
        rules: {
          telphone: [
            {
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              message: '请输入登录密码',
              trigger: 'blur'
            }
          ],
          code: [
            {
              required: true,
              message: '请输入验证码',
              trigger: 'blur'
            }
          ]
        },
        // 用于刷新验证码
        v: new Date().getTime(),
        // 是否显示图形验证码弹窗
        showImgCode: false,
        // 图形验证码
        imgCode: '',
        // 发送验证码按钮loading
        codeLoading: false,
        // 验证码倒计时时间
        countdownTime: 60,
        // 验证码倒计时定时器
        countdownTimer: null
      };
    },
    computed: {
      // 图形验证码地址
      captcha() {
       //return 'http://www.figureadmin.com/api/login/getCaptcha?v=' + this.v;
        return window.location.protocol + "//" +location.host+'/api/login/getCaptcha?v=' + this.v;
      }
    },
    created() {
      let host = location.host;
    
      getProxyByHost({host}).then((msg) => {
        if(msg!="" ){
          this.indexData = msg;
        }else{
          getIndexData().then((msg) => {
            this.indexData = msg;
            if(msg.site_login_background == ""){
              this.indexData.site_login_background = '/imgs/bg.jpg';
            }

            if(msg.site_login_image == ""){
              this.indexData.site_login_image = '/imgs/left-bg.jpg';
            }
          }).catch((e) => {
            this.$message.error(e.message);
          });
        }
        let ico = this.indexData?.site_ico;

        if(ico!=null && ico!=null && ico!=''){
          let $favicon = document.querySelector('link[rel="icon"]');
          if ($favicon !== null) {
            $favicon.href = ico;
          } else {
            $favicon = document.createElement("link");
            $favicon.rel = "icon";
            $favicon.href = ico;
            document.head.appendChild($favicon);
          }
        }
      }).catch((e) => {
        this.$message.error(e.message);
      });

      if (getToken()) {
        this.goHome();
      }
    },
    methods: {
      /* 提交 */
      doSubmit() {
        this.$refs['form'].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;

          let host = location.host;
        
          let data = {
            ...this.form,
            host:host
          }
          this.loading = true;

          register(data).then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.$router.push('/login');
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
            
          });

         
        });
      },
      /* 更换图形验证码 */
      changeImgCode() {
        // 这里演示的验证码是后端地址直接是图片的形式, 如果后端返回base64格式请参考登录页面
        this.v = new Date().getTime();
      },
      /* 显示发送短信验证码弹窗 */
      showImgCodeCheck() {
        if (!this.form.telphone) {
          this.$message.error('请输入手机号码');
          return;
        }
        this.imgCode = '';
        this.changeImgCode();
        this.showImgCode = true;
      },
      /* 发送短信验证码 */
      sendCode() {
        if (!this.imgCode) {
          this.$message.error('请输入图形验证码');
          return;
        }

        if (!this.form.telphone) {
          this.$message.error('请输入手机号码');
          return;
        }

        this.codeLoading = true;


        sendCode({captcha:this.imgCode,telphone:this.form.telphone}).then((msg) => {
          this.$message.success('短信验证码发送成功, 请注意查收!');
          this.showImgCode = false;
          this.codeLoading = false;
          this.startCountdownTimer();
        })
        .catch((e) => {
          this.$message.error(e.message);
          this.showImgCode = false;
          this.codeLoading = false;
        });

      },
      /* 开始对按钮进行倒计时 */
      startCountdownTimer() {
        this.countdownTime = 60;
        this.countdownTimer = setInterval(() => {
          if (this.countdownTime <= 1) {
            clearInterval(this.countdownTimer);
            this.countdownTimer = null;
          }
          this.countdownTime--;
        }, 1000);
      },
      
    },
    destroyed() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
      }
    }
  };
</script>

<style scoped>
  /* 背景 */
  .login-wrapper {
    padding: 50px 20px;
    position: relative;
    box-sizing: border-box;
    background-image: url('~@/assets/bg-login.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
  }

  .login-wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
  }

  /* 卡片 */
  .login-form {
    width: 360px;
    margin: 0 auto;
    max-width: 100%;
    padding: 25px 30px;
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    position: relative;
    z-index: 2;
  }

  .login-form-right .login-form {
    margin: 0 15% 0 auto;
  }

  .login-form-left .login-form {
    margin: 0 auto 0 15%;
  }

  .login-form h4 {
    margin: 0 0 25px 0;
    text-align: center;
  }

  .login-form > .el-form-item {
    margin-bottom: 25px;
  }

  /* 验证码 */
  .login-input-group {
    display: flex;
    align-items: center;
  }

  .login-input-group ::v-deep .el-input {
    flex: 1;
  }

  .login-input-group .login-captcha {
    width: 102px;
    height: 38px;
    margin-left: 10px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    text-align: center;
    cursor: pointer;
  }

  .login-captcha:hover {
    opacity: 0.75;
  }

  .login-btn {
    display: block;
    width: 100%;
  }

  /* 第三方登录图标 */
  .login-oauth-icon {
    color: #fff;
    padding: 5px;
    margin: 0 10px;
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
  }

  /* 底部版权 */
  .login-copyright {
    color: #eee;
    text-align: center;
    padding-top: 20px;
    position: relative;
    z-index: 1;
  }

  /* 响应式 */
  @media screen and (min-height: 550px) {
    .login-form {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%);
      margin-top: -220px;
    }

    .login-form-right .login-form,
    .login-form-left .login-form {
      left: auto;
      right: 15%;
      transform: translateX(0);
      margin: -220px auto auto auto;
    }

    .login-form-left .login-form {
      right: auto;
      left: 15%;
    }

    .login-copyright {
      position: absolute;
      bottom: 20px;
      right: 0;
      left: 0;
    }
  }

  @media screen and (max-width: 768px) {
    .login-form-right .login-form,
    .login-form-left .login-form {
      left: 50%;
      right: auto;
      margin-right: auto;
      transform: translateX(-50%);
    }
  }
  
/* 底部 */

.title-div {
  color: #ffff;
  display: flex;
  font-size: 20px;
}

a:hover{
  color:#ffff;
}
a{
  color:#ffff;
}

.d-fixed {
  width: 92%; position : fixed;
  bottom: 20px;
  left: 20px;
  position: fixed;
  z-index: 9999;
}

.d-height {
  height: 100px;
  color:#ffff;
}

.d-title {
  margin-bottom: 19px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

.d-margin-btn {
  margin-bottom: 17px;
}

.d-title2 {
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

.d-img {
  border-radius: 10px;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.d-m-top {
  margin-top: 10px;
}

.d-div {
  color: #fff;
  font-size: 13px;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-around {
  padding: 0 20px; display : flex;
  justify-content: space-around;
  align-items: center;
  display: flex;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

.d-icon-img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  font-size: 19px;
}

.d-div2{
  margin-left: 10px;
}
</style>
